<template>
<div class="page">
  <section class="nav" v-on:click="clickMore()">
    <header class="col-xs-6 col-sm-2 col-md-2 col-lg-1">
      <img src="../../static/images/logo.png" alt="长投理财">
    </header>
  </section>
  <section class="header-bar">
  </section>
  <section class="list">
    <header class="book col-xs-4 col-sm-2 col-md-1 col-lg-1">
      <p>理财书籍</p>
    </header>
    <div class="col-xs-3 col-sm-5 col-md-7 col-lg-9">
    </div>
  </section>
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <br>
  </div>
  <section class="book-info col-xs-12 col-sm-6 col-md-6 col-lg-6">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="book-name col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <p class="book-name">{{bookInfo.name}}</p>
      </div>
      <!-- <div class="comment-number col-xs-6 col-sm-4 col-md-4 col-lg-4">
        <h6><span>822</span>评价</h6>
      </div> -->
      <div class="score col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <h6>豆瓣评分:<span>{{bookInfo.comment_score/100}}</span></h6>
      </div>
    </div>
    <div class="book-more-info col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="book-one col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <!-- <img src="../../static/images/s3354143.jpg" alt="长投理财"> -->
        <h6>{{bookInfo.name}}</h6>
        <!-- <h6 class="small">作者:[美] 罗伯特·T·清崎 </h6> -->
      </div>
      <div class="book-tow col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <div class="text-left">
          <h6>作者:  <span v-for="author of bookInfo.author">{{author}}, </span></h6>
          <h6>出版社: {{bookInfo.publish_company}}</h6>
          <h6>出版年: {{bookInfo.publish_time}}</h6>
          <h6>页数: {{bookInfo.page_num}}</h6>
          <!-- <h6>定价: {{bookInfo.author}}</h6> -->
          <!-- <h6>ISBN: {{bookInfo.author}}</h6> -->
        </div>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <button type="button" class="more btn btn-default" v-on:click="clickMore()"><small>更多同类书籍</small></button>
      </div>
    </div>
  </section>
  <section class="book-comment col-xs-12 col-sm-6 col-md-6 col-lg-6">
    <div class="book-comment-head">
        <small class="text-left col-xs-6 col-sm-6 col-md-6 col-lg-6">书评:</small>
        <small class="text-right col-xs-6 col-sm-6 col-md-6 col-lg-6">{{bookInfo.comment_num}}<span>人评论</span></small>
    </div>

      <div class="book-comment-con" v-for="(comment, index) of comments">
        <div class="book-comment-one">
          <div class="text-left col-xs-2 col-sm-2 col-md-2 col-lg-2"><img class="" v-bind:src="comment.author_logo_url" alt="长投理财"></div>
          <small class="text-left col-xs-7 col-sm-7 col-md-7 col-lg-7">昵称: {{comment.author_name}}</small>
          <small class="text-right col-xs-3 col-sm-3 col-md-3 col-lg-3"><span>评分:</span>{{bookInfo.comment_score/100}}</small>
        </div>
        <div class="book-comment-tow">
          <small class="text-left col-xs-10 col-sm-10 col-md-10 col-lg-10">{{comment.title}}</small>
          <button type="button" class="comment-p text-right col-xs-2 col-sm-2 col-md-2 col-lg-2" v-show="index !== i" v-on:click="open(index)">展开</button>
          <button type="button" class="comment-p text-right col-xs-2 col-sm-2 col-md-2 col-lg-2" v-show="index == i" v-on:click="close(index)">收回</button>
        </div>
        <div class="book-comment-three text-left" v-show="openCrl[index] ? openCrl[index] : true" v-html="comment.summary">
          <!-- {{comment.summary}} -->
        </div>
        <div class="book-comment-three text-left" v-show="openCrl[index] ? openCrl[index] : false" v-html="comment.content">
          <!-- {{comment.content}} -->
        </div>
      </div>
      <!-- 下一页 -->
      <div class="next col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <button type="button" class="more btn btn-default" v-on:click="clickNext()"><small>下一页</small></button>
      </div>
  </section>
</div>
</template>

<script>
var moment = require('moment');
import $ from 'jquery';
// import data from '../data/data.json';
import {getBook, getComment} from '../api/api';

export default {
  data() {
    return {
      bookInfo: [],
      // authors: [],
      comments: [],
      isShow: true,
      i: -1,
      openCrl: {},
      currPage: 0
    }
  },
  created() {
    this.getBookInfo('920132767134515200', this.currPage);
  },
  mounted() {
  },
  methods: {
    // open: function() {
    //   this.isShow = !this.isShow;
    // },
    open(index) {
      console.log('wwww', index);
      this.i = index
      this.$set(this.openCrl, index, true)
    },
    close(index) {
      this.i = -1
      this.openCrl[index] = false
    },
    // 获得数据
    getBookInfo(bookId, frompage) {
      getBook('920132767134515200')
        .then((response) => {
          // console.log(response.data)
          this.bookInfo = response.data;
          this.bookInfo.author = JSON.parse(response.data.author);
          this.bookInfo.publish_time = moment(response.data.publish_time).format('YYYY年MM月DD日');
          getComment('920132767134515200', frompage)
            .then((response) => {
              // console.log(response.data.notes)
              this.comments = response.data.notes;
            })
        })
    },
    clickNext() {
      this.currPage += 10
      let frompage = this.currPage + 10
      this.getBookInfo('920132767134515200', frompage);
    },
    clickMore() {
      this.$router.push('/');
    }
  }
}
</script>

<style lang="scss" scoped>
.nav {
    background-color: white;
    margin: 2rem 0;
    padding-left: 1rem;
    img {
        height: 4rem;
    }
}
.header-bar {
    background-color: #17BBEF;
    height: 10px;
}
.book {
    margin: 2rem 1rem;
    margin-bottom: 0;
    p {
        // border-width: 0;
        color: #4D4D4D;
        border: 0;
        border-right: 1px;
        border-right-color: #17BBEF;
        border-style: solid;
    }
}
.book-info {
    .book-name {
        background-color: #FFEB60;
        height: 4rem;
        line-height: 4rem;
        text-overflow: ellipsis;
        overflow:hidden;
        white-space: nowrap;
        font-size: 12px;
    }
    .comment-number {
      h6{
        height: 4rem;
        line-height: 4rem;
        color: #808080;
        text-overflow: ellipsis;
        overflow:hidden;
        white-space: nowrap;
      }
    }
    .score {
      h6 {
        height: 4rem;
        line-height: 4rem;
        color: #808080;
        text-overflow: ellipsis;
        overflow:hidden;
        white-space: nowrap;
        span {
          // font-size: 20px;
          color: #17BBEF;
        }
      }
    }
    .book-more-info {
          padding: 2rem 0;
          border: 1px;
          border-color: #E6E6E6;
          border-style: solid;
          .book-one {
            img {
                margin: 1rem;
                width: 50%;
            }
            p {
                margin: 1rem;
            }
            h6 {
              color: #808080;
            }
          }
          .book-tow {
            div{
              // padding: 3rem 0;
            }
            span {
              color: #17BBEF;
            }
            img {
                margin: 1rem;
                width: 50%;
            }
            p {
                margin: 1rem;
            }
            h6 {
              margin: 1rem;
              color: #808080;
            }
          }
    }
}
// more button
.more {
    margin: 4rem 1rem;
    margin-bottom: 0;
    color: #17BBEF;
    border-color: #17BBEF;
}
.more:hover {
    background-color:#F2F2F2;
    color: #17BBEF;
}
// 评论
.book-comment {
  .book-comment-head {
    background-color: #F2F2F2;
    height: 4rem;
    line-height: 4rem;
    span {
      color: #808080;
    }
  }
  .book-comment-con {
      padding-top: 1rem;
      margin-bottom: 3rem;
      border: 1px;
      border-color: #E6E6E6;
      border-style: solid;
      .book-comment-one {
        height: 6rem;
        line-height: 6rem;
        img  {
          // margin: 0.5rem 0;
          // height: 100%;
          // width: 100%;
          // display: block;
        }
        span {
          color: #808080;
        }
      }
      .book-comment-tow {
        height: 6rem;
        line-height: 6rem;
        text-overflow: ellipsis;
        overflow:hidden;
        white-space: nowrap;
        small {
          text-overflow: ellipsis;
          overflow:hidden;
          white-space: nowrap;
        }
        .comment-p {
          color: #17BBEF;
          background-color: white;
        }
      }
      .book-comment-three {
        // height: 6rem;
        // line-height: 6rem;
        margin-bottom: 4rem;
        padding: 1rem;
        font-size: 12px;
        color: #808080;
      }
  }
  // next button
  .next {
    margin-top: -3rem;
    margin-bottom: 5rem;
  }
}
</style>
